<template>
    <div class="body">
        <div class="main">
            <div>
                <el-button type="text" style="color: #5b8c00">写新文章</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button type="text" style="color: #5b8c00">内容检索</el-button>
            </div>
            <el-card class="item" shadow="hover">
                    <el-input aria-placeholder="输入标题检索">
                        <el-button type="primary" slot="append">筛选</el-button>
                    </el-input>
<!--                <editor v-if="newArticle" style="width: 100%;display: block;height: 600px;margin-bottom: 70px"></editor>-->
            </el-card>
            <el-card  v-if="newArticle">
                <editor style="width: 100%;display: block;height: 600px;margin-bottom: 70px"></editor>
            </el-card>
            <el-card class="item" v-for="(item,index) in testData" :key="index" shadow="hover" @click.native="console.log('el-card clicked')">
                <div slot="header">
                    <span style="color: #5b8c00; font-weight: bold">{{item.title}}</span>
                    <el-button style="float: right; padding: 3px 0;color: #5b8c00" type="text">操作内容</el-button>
                </div>
                <div style="color: #5b8c00">
                    {{item.text}}
                </div>
            </el-card>
            <div style="margin: 20px">没有更多了,去写新内容吧</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Article",
        components: {},
        data(){
            return{
                newArticle:false,
                bg: {},
                testData:[
                    {
                        title:'第一篇文章',
                        text:'这是第一篇文章的内容。士大夫撒旦' +
                            '顶顶顶顶顶顶顶顶顶顶顶顶顶顶士大夫' +
                            '方法方法烦烦烦烦烦烦烦烦烦烦烦烦士' +
                            '大夫方法方法烦烦烦烦烦烦烦烦烦烦烦' +
                            '烦士大夫方法方法烦烦烦烦烦烦烦烦烦' +
                            '烦烦烦士大夫方法方法烦烦烦烦烦烦士' +
                            '大夫方法方法烦烦烦烦烦烦烦烦烦烦烦' +
                            '烦法国哈哈哈哈哈哈哈哈哈哈哈哈哈哈' +
                            '哈哈哈法国哈哈哈哈哈哈哈哈哈哈哈哈' +
                            '哈哈哈哈哈法国哈哈哈哈哈哈哈哈哈哈' +
                            '哈哈哈哈哈哈哈突然有有有有有有有有' +
                            '有有有有有有有有有有',
                    },
                    {
                        title:'第二篇文章',
                        text:'这是第二篇文章的内容。',
                    },
                    {
                        title:'第三篇文章',
                        text:'这是第三篇文章的内容。',
                    },
                    {
                        title:'第四篇文章',
                        text:'这是第四篇文章的内容。',
                    },
                ]
            }
        },
        methods:{
            getArticle(){
                this.axios.get().then()
            }
        }
    }
</script>

<style scoped>
    .body{
        display: flex;
        justify-content: center;
        color: #5b8c00;
    }
    .main{
        width: 60%;
    }
    .item {
        text-align: left;
        margin: 10px;
        word-wrap: break-word;
        word-break:break-all;
    }
</style>
